<!-- 这个组件在未来会被废弃，改为@\src\views\order\detail\components\part\DetailModal.vue -->
<template>
  <h-drawer
    v-model="visible"
    :loading="getMaterialDetailLoading || getMaterialListLoading || getOperateLogLoading"
    title="物料详情"
    :width="1000"
    unit="px"
    @close="hideDrawer"
  >
    <div class="material-modal-content">
      <div class="title">基本信息</div>
      <div v-if="materialDetail" class="info-list">
        <div class="info-item">
          <div class="label">申请条码:</div>
          <div class="value">{{ materialDetail.code }}</div>
        </div>
        <div class="info-item">
          <div class="label">关联工单:</div>
          <div class="value">{{ materialDetail.workNo }}</div>
        </div>
        <div class="info-item">
          <div class="label">单据状态:</div>
          <div class="value">
            <h-status v-if="materialDetail.status === 1" :height="22" type="warning">
              待审核
            </h-status>
            <h-status v-if="materialDetail.status === 2" :height="22" type="success">
              审核通过
            </h-status>
            <h-status v-if="materialDetail.status === 3" :height="22" type="warning">
              待发送报价
            </h-status>
            <h-status v-if="materialDetail.status === 4" :height="22" type="warning">
              待确认报价
            </h-status>
            <h-status v-if="materialDetail.status === 5" :height="22" type="success">
              已同意报价
            </h-status>
            <h-status v-if="materialDetail.status === 6" :height="22" type="warning">
              待领料
            </h-status>
            <h-status v-if="materialDetail.status === 7" :height="22" type="success">
              已领料
            </h-status>
            <h-status v-if="materialDetail.status === 8" :height="22" type="error">
              不同意报价
            </h-status>
            <h-status v-if="materialDetail.status === 9" :height="22" type="error">
              审核驳回
            </h-status>
            <h-status v-if="materialDetail.status === 10" :height="22" type="info">已撤回</h-status>
            <h-status v-if="materialDetail.status === 11" :height="22" type="info">已取消</h-status>
          </div>
        </div>
        <div class="info-item">
          <div class="label">申请类型:</div>
          <div class="value">
            <div v-if="materialDetail.type === 1">平台物料</div>
            <div v-if="materialDetail.type === 2" style="display: flex; gap: 5px">
              <span>外部物料</span>
              <span>-</span>
              <span v-if="materialDetail.networkSpareType === 1">网点物料</span>
              <span v-if="materialDetail.networkSpareType === 2">工程师物料</span>
              <span v-if="materialDetail.networkSpareType === 3">自购物料</span>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="label">申请人员:</div>
          <div class="value">{{ materialDetail.applyEmp }}</div>
        </div>
        <div class="info-item">
          <div class="label">申请时间:</div>
          <div class="value">{{ materialDetail.createTime }}</div>
        </div>
        <div class="info-item">
          <div class="label">审核时间:</div>
          <div class="value">{{ materialDetail.reviewTime }}</div>
        </div>
        <div class="info-item">
          <div class="label">审核人员:</div>
          <div class="value">{{ materialDetail.reviewEmp }}</div>
        </div>
        <div class="info-item">
          <div class="label">物料收货地址:</div>
          <div class="value">
            {{ materialDetail.receiptName }} &nbsp;{{ materialDetail.receiptPhone }}&nbsp;{{
              materialDetail.receiptProvince
            }}{{ materialDetail.receiptCity }}{{ materialDetail.receiptArea
            }}{{ materialDetail.receiptTown }}{{ materialDetail.receiptAddress }}
          </div>
        </div>
      </div>

      <div v-if="materialDetail && materialDetail.oldCopeWay" class="title">
        <div class="line"></div>
        <h4>旧件信息</h4>
      </div>
      <div v-if="materialDetail && materialDetail.oldCopeWay" class="old_part_info info-list">
        <div class="info-item">
          <div class="label">旧件处理:</div>
          <div class="value">{{
            getOldSparePartHandleMethodRenderTxt(materialDetail.oldCopeWay)
          }}</div>
        </div>
        <div v-if="materialDetail.oldCopeWay === 2" class="info-item">
          <div class="label">旧件收货信息:</div>
          <div class="value">
            {{ materialDetail.oldReceiptName }} &nbsp;{{ materialDetail.oldReceiptPhone }}&nbsp;{{
              materialDetail.oldReceiptProvince
            }}{{ materialDetail.oldReceiptCity }}{{ materialDetail.oldReceiptArea
            }}{{ materialDetail.oldReceiptTown }}{{ materialDetail.oldReceiptAddress }}
          </div>
        </div>
        <div v-if="materialDetail.oldCopeWay === 2" class="info-item">
          <div class="label">退回仓库:</div>
          <div class="value">{{ materialDetail.store }}</div>
        </div>
      </div>

      <el-tabs v-model="activeName" class="table-detail" @tab-change="handleTabsChange">
        <el-tab-pane label="物料" name="materialList">
          <el-table :border="true" :data="materialList" :max-height="500" resizable stripe>
            <!--序号-->
            <el-table-column :align="'center'" fixed="left" label="序号" width="50" type="index" />

            <!--收支类型-->
            <el-table-column label="收支类型" prop="date" width="100">
              <template #default="scope">
                <span v-if="scope.row.type === 1">公司承担</span>
                <span v-else-if="scope.row.type === 2">收取公司</span>
                <span v-else-if="scope.row.type === 3">支付网点</span>
              </template>
            </el-table-column>

            <!--申请的物料-->
            <el-table-column label="申请的物料" prop="name" show-overflow-tooltip width="180">
              <template #default="i">
                <span>{{
                  `${i.row.applySpareModel} ${i.row.applySpareSpec} ${i.row.applySpareSpecCode}`
                }}</span>
              </template>
            </el-table-column>

            <!--审核后的物料-->
            <el-table-column label="审核后的物料" prop="name" show-overflow-tooltip width="180">
              <template #default="scope">
                <span
                  v-if="
                    scope.row.checkSpareModel ||
                    scope.row.checkSpareSpec ||
                    scope.row.checkSpareSpecCode
                  "
                  >{{
                    `${scope.row.checkSpareModel} ${scope.row.checkSpareSpec} ${scope.row.checkSpareSpecCode}`
                  }}</span
                >
                <span></span>
              </template>
            </el-table-column>

            <!--数量-->
            <el-table-column label="数量" prop="qty" width="80" />

            <!--单价-->
            <el-table-column label="单价" prop="price" width="100">
              <template #default="{ row }">￥{{ row.price.toFixed(2) }}</template>
            </el-table-column>

            <!--总额-->
            <el-table-column label="总额" width="100">
              <template #default="{ row }">￥{{ (row.price * row.qty).toFixed(2) }}</template>
            </el-table-column>

            <!--折扣-->
            <!-- <el-table-column label="折扣" prop="discountPrice" width="100">
              <template #default="{ row }">
                {{ (Number(row.discountPrice) || 0).toFixed(2) }}%
              </template>
            </el-table-column> -->

            <!--优惠-->
            <!-- <el-table-column label="优惠" width="100">
              <template #default="{ row }">{{
                (row.price * row.qty - row.price * row.qty * (row.discountPrice / 100)).toFixed(2)
              }}</template>
            </el-table-column> -->

            <!--应收总额-->
            <!-- <el-table-column label="应收总额" width="100">
              <template #default="{ row }">{{
                (row.price * row.qty * (row.discountPrice / 100)).toFixed(2)
              }}</template>
            </el-table-column> -->

            <!--出库仓库-->
            <el-table-column label="出库仓库" prop="store" show-overflow-tooltip width="120" />

            <!--备注-->
            <el-table-column label="备注" prop="remark" show-overflow-tooltip width="170" />

            <!--附件-->
            <el-table-column label="附件" prop="city" :width="pictureColumnWidth">
              <template #default="scope">
                <div style="display: flex; align-items: center; gap: 8px">
                  <div v-for="(img, imgIndex) in scope.row.images" :key="img.id">
                    <h-image
                      :width="60"
                      :height="40"
                      :src="img.image"
                      :preview-src-list="scope.row.images.map((item) => item.image)"
                      :initial-index="imgIndex"
                      fit="contain"
                      :padding="2"
                      :show-del-btn="false"
                    />
                  </div>
                </div>
              </template>
            </el-table-column>

            <!--审核状态-->
            <el-table-column
              label="审核状态"
              prop="name"
              width="80"
              fixed="right"
              :align="'center'"
            >
              <template #default="{ row }">
                <h-status v-if="row.status === 1" :height="22" type="warning"> 待审核 </h-status>
                <h-status v-if="row.status === 2" :height="22" type="success"> 已通过 </h-status>
                <h-status v-if="row.status === 3" :height="22" type="error"> 已驳回 </h-status>
                <h-status v-if="row.status === 4" :height="22" type="info">已撤回</h-status>
                <h-status v-if="row.status === 4" :height="22" type="info">已取消</h-status>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="操作日志" name="operateLog" class="operate_log_pane">
          <div class="operate_log">
            <div class="table">
              <el-table :border="true" :data="operateLogList" :max-height="500" resizable stripe>
                <!--序号-->
                <el-table-column
                  :align="'center'"
                  fixed="left"
                  label="序号"
                  type="index"
                  width="50"
                />

                <!--操作人-->
                <el-table-column
                  label="操作人"
                  prop="createEmp"
                  show-overflow-tooltip
                  width="140"
                />

                <!--操作事件-->
                <el-table-column label="操作事件" prop="event" show-overflow-tooltip width="240" />

                <!--备注-->
                <el-table-column
                  label="备注"
                  min-width="220"
                  prop="content"
                  show-overflow-tooltip
                />

                <!--时间-->
                <el-table-column label="时间" prop="createTime" width="150" />
              </el-table>
            </div>
            <div class="operate-log-pagination">
              <Pagination
                ref="opeateLogPagiantionInstance"
                :list_total="operateLogListTotal"
                @size-change="getOperateLogList"
                @current-change="getOperateLogList"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <h-button is-modal @click="hideDrawer">关闭</h-button>
    </template>
  </h-drawer>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue'
  import Pagination from '@/components/Pagination/index.vue'
  import {
    useGetMaterialDetail,
    useGetMaterialDetailSparePartList,
    useGetMaterialOperateLog,
  } from '@/services/pages/order/useSpare'

  const {
    detail: materialDetail,
    getDetailLoading: getMaterialDetailLoading,
    getDetail: getMaterialDetail,
  } = useGetMaterialDetail()
  const {
    list: materialList,
    getListLoading: getMaterialListLoading,
    getList: getMaterialList,
  } = useGetMaterialDetailSparePartList()
  const {
    log: operateLogList,
    listTotal: operateLogListTotal,
    getLogParam: getOperateLogParam,
    getLogLoading: getOperateLogLoading,
    getLog: getOperateLog,
  } = useGetMaterialOperateLog()

  const props = defineProps({
    partsId: {
      type: String,
      default: () => '',
    },
    workNo: {
      type: String,
      default: () => '',
    },
    feeNo: {
      type: String,
      default: () => '',
    },
  })

  const visible = defineModel('modelValue', { type: Boolean, default: false })
  const pictureColumnWidth = ref(130)
  const activeName = ref<'materialList' | 'operateLog'>('materialList')
  const opeateLogPagiantionInstance = ref<InstanceType<typeof Pagination> | null>(null)

  const setPictureColumnWidth = () => {
    let maxImageLength = Math.max(...materialList.value.map((item) => item.images.length))
    if (maxImageLength > 0) {
      pictureColumnWidth.value = maxImageLength * 60 + (maxImageLength - 1) * 8 + 24
    }
  }

  const getOldSparePartHandleMethodRenderTxt = (type: 1 | 2) => {
    if (type === 1) {
      return '废弃'
    }

    if (type === 2) {
      return '旧件退回'
    }
  }

  const getOperateLogList = async () => {
    if (opeateLogPagiantionInstance.value) {
      getOperateLogParam.value.limit = opeateLogPagiantionInstance.value.size
      getOperateLogParam.value.page = opeateLogPagiantionInstance.value.current
      getOperateLog(props.partsId)
    }
  }

  const handleTabsChange = (val: typeof activeName.value) => {
    switch (val) {
      case 'materialList':
        getMaterialList(props.partsId).then(() => {
          setPictureColumnWidth()
        })
        break
      case 'operateLog':
        getOperateLogList()
        break
    }
  }

  const hideDrawer = () => {
    visible.value = false
    activeName.value = 'materialList'
  }

  watch(
    props,
    async (value) => {
      if (value.partsId && visible.value) {
        getMaterialDetail(value.partsId)
        getMaterialList(value.partsId).then(() => {
          setPictureColumnWidth()
        })
      }
    },
    { immediate: true },
  )
</script>

<style lang="scss" scoped>
  .material-modal-content {
    height: 100%;

    .title {
      margin-bottom: 12px;
      font-size: 14px;
      border-left: 3px solid $primaryColor;
      padding-left: 5px;
      font-weight: bold;
    }

    .info-list {
      display: flex;
      flex-wrap: wrap;
      column-gap: 80px;
      row-gap: 12px;
      margin-bottom: 12px;

      .info-item {
        display: flex;
        column-gap: 5px;
        align-items: center;
        height: 16px;
        min-width: 200px;

        .label {
          color: #606266;
        }
      }
    }

    .operate-log-pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
  }
</style>
